<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>
<body>
<div id="app">
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-user-solid"></i>学生管理</template>
<!--                    <el-menu-item-group>-->
<!--                        <template slot="title">分组一</template>-->
                        <el-menu-item index="2-1" @click="checkPath('info.html')">学生信息</el-menu-item>
                        <el-menu-item index="2-2" @click="checkPath('scope.html')">成绩信息</el-menu-item>
<!--                    </el-menu-item-group>-->

<!--                    <el-menu-item-group>-->
<!--                        <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--                    </el-menu-item-group>-->


                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-s-custom"></i>教师管理</template>

                    <el-menu-item index="2-1" @click="checkPath('teacher.html')">教师列表</el-menu-item>
                    <el-menu-item index="2-2" @click="checkPath('teach.html')">教师授课信息</el-menu-item>

                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <!--根据具体的菜单跳转不同的显示-->
                <iframe :src="path" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
            </el-main>
        </el-container>
    </el-container>

</div>

</body>
</html>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
          return{
              path:'1.elementui使用.html'
          }
        },
        methods:{
            //切换菜单右侧现显示的页面
            checkPath(url){
               this.path=url;
            }
        }
    });
</script>